<template>
  <div class="video-style">
    <div class="title">图片分组</div>
    <el-form :model="datas" label-width="120px" label-position="left">
      <el-form-item label="自动播放:">
        <el-switch v-model="datas.autoplay" />
      </el-form-item>
      <el-form-item label="视频封面:">
        <UploadImg v-model:image-url="datas.list[0].image">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传封面图</span>
          </template>
        </UploadImg>
      </el-form-item>
      <el-form-item label="视频地址:">
        <el-input v-model="datas.list[0].url" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup name="VideoStyle">
import { toRefs } from "vue";
import UploadImg from "@/components/Upload/Img.vue";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
</script>

<style lang="scss" scoped>
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
</style>
